<template>
  <div id="wails-app" class="sponsor-page">
    <header class="header">
      <div class="header-left">
        <div class="logo"><i class="fas fa-hands-helping"></i></div>
        <div class="header-text">
          <h1>赞助与支持</h1>
          <p>感谢您对项目的关注与支持，一起推动创新。</p>
        </div>
      </div>
      <div class="header-right row-inline">
        <img :src="qrImage" alt="公众号二维码" class="qr-image" />
        <div class="qr-wrapper">
          <h3>关注公众号</h3>
          <p style="color: #9fc6e8">扫码关注，获取更多资讯</p>
        </div>
      </div>
    </header>

    <div class="content-area">
      <section class="left-panel">
        <div class="row">
          <div class="card gradient-blue">
            <div class="card-icon"><i class="fas fa-sync-alt"></i></div>
            <h2>更新说明</h2>
            <ul class="list scrollable max-limited">
              <li v-for="(u,i) in updates" :key="i">
                <span class="date">{{ u.date }}</span>
                <span class="text">{{ u.content }}</span>
                <span v-if="u.isNew" class="new">NEW</span>
              </li>
            </ul>
          </div>
          <div class="card gradient-purple">
            <div class="card-icon"><i class="fas fa-heart"></i></div>
            <h2>特别感谢<span style="font-size: small">(以下排名以时间顺序排列)</span></h2>
            <ul class="thanks-grid scrollable max-limited">
              <li v-for="(p,i) in specialThanks" :key="i" class="thanks-item">
                <img :src="p.src" alt="avatar" class="avatar-large" />
                <div class="name">{{ p.name }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="card3 gradient-pink">
            <div class="card-icon"><i class="fas fa-link"></i></div>
            <h2>相关链接</h2>
            <ul class="links scrollable max-limited">
              <li v-for="(l,i) in relatedLinks" :key="i">
                <a :href="l.url" target="_blank">
                  <i :class="l.icon"></i><span>{{ l.text }}</span>
                </a>
              </li>
            </ul>
          </div>
          <!--          <div class="card gradient-orange">-->
          <!--            <div class="card-icon"><i class="fas fa-donate"></i></div>-->
          <!--            <h2>友情赞助</h2>-->
          <!--            <ul class="sponsor-grid scrollable max-limited">-->
          <!--              <li v-for="(s,i) in sponsors" :key="i" class="sponsor-item">-->
          <!--                <img :src="s.src" alt="sponsor" class="avatar-large" />-->
          <!--                <div class="name">{{ s.name }}</div>-->
          <!--                <div class="amount">¥{{ s.amount }}</div>-->
          <!--              </li>-->
          <!--            </ul>-->
          <!--          </div>-->
        </div>
      </section>
    </div>

  </div>
</template>

<script>
export default {
  name: 'SponsorPage',
  data() {
    return {
      updates: [
        {date:'v1.8.5',content: '1. 修改Note笔记界面为奶白色; 2. 新增菜单顺序调整功能',isNew:true},
        {date:'v1.8.4',content: '1. 新增fuzz调用界面'},
        {date:'v1.8.3',content: '1. 新增代理池功能；2. 优化CyberChef、ssh连接功能'},
        {date:'v1.8.2',content: '优化工具、网址搜索功能;'},
        { date: 'v1.8.1', content: '1.新增Note备忘录功能;2.优化工具、网址搜索功能;3.新增jwt爆破功能;4.新增地图接口调用功能;5.优化redis连接及显示功能;6.修改CyberChef为中文版本的'},
        { date: 'v1.8.0', content: '1.新增工具箱打开路径;2.新增图标选择功能;3.优化ftp、ssh连接弹窗提示;4.小程序反编译模块新增node环境监测功能;5.新增杀软检测目录进程清单;6.修改CyberChef为中文版本的'},
        { date: 'v1.7.5', content: '1.新增小程序反编译功能（需要自行先安装node环境，版本14以上都行，或者直接安装最新版即可）;2.修改oss资源桶遍历逻辑;3.修改免杀加载器模版' },
        { date: 'v1.7.4', content: '1.修改文件捆绑失败的bug;2.更新ByPassQvm图标' },
        { date: 'v1.7.3', content: '1.更新杀软识别数据库' },
        { date: 'v1.7.2', content: '1.新增FTP连接功能（匿名登录时，用户名为anonymous ，密码为空）' },
        { date: 'v1.7.1', content: '修复一个小bug' },
        { date: 'v1.7.0', content: '新增工具仓库、网址站点的任意拖拽功能，修改工具摆放顺序' },
        { date: 'v1.6', content: '新增登录页面默认密码修改功能;更新webssh功能，新增批量ssh命令执行功能' },
        { date: 'v1.5', content: '免杀生成：新增分离、远程两种加载模式' },
        { date: 'v1.4', content: '新增一键去除upx特征的功能（测试，只是规避明显特征，避免直接upx -d脱壳）;新增一键添加数字签名的小功能' },
        { date: 'v1.3', content: '集成ShellCode在线免杀处理平台;新增文件体积修改功能;新增免杀：5种运行模式、2种加密方式、2种编译方式' },
        { date: 'v1.2', content: '新增信息处理模块;迁移蓝队批量封禁IP模块至信息处理  ' },
        { date: 'v1.1', content: '目前集合功能：网址导航、工具导航、信息查询、编码解码%' }
      ],
      specialThanks: [
        { name: 'joker', src: '' },
        { name: 'ryuuz4k1', src: '' },
        { name: 'ToPaint', src: '' },
        { name: '吃人尘', src: ''},
        { name: '夜晓喽', src: ''},
      ],
      relatedLinks: [
        { text: 'GitHub', url: 'https://github.com/doki-byte/EasyTools', icon: 'fab fa-github' },
        { text: '纷传(叮叮当当)', url: 'https://h5.fenchuan8.com/#/index?forum=102706&yqm=CM4RP', icon: 'fas fa-book' },
        { text: 'QQ交流群(702376033)', url: 'https://qm.qq.com/q/VEzWDiDMgm', icon: 'fas fa-book' },
      ],
      // sponsors: [
      //   { name: '科技先锋', amount: '500', src: '_ME_5' },
      //   { name: '云端科技', amount: '200', src: '_ME_6' },
      //   { name: '数据无限', amount: '150', src: '_ME_7' },
      //   { name: '智能方案', amount: '100', src: '_ME_8' }
      // ],
      qrImage: ''
    };
  },
  methods: {
  }
};
</script>

<style scoped>
.max-limited {
  max-height: 400px;
  overflow-y: auto;
}

.row {
  gap: 0.7rem !important;
}

.row-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(45deg, #8eb3e6, #52678c);
  padding: 1.4rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  gap: 1rem;
  height: 90px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 600px;
}

.logo {
  font-size: 2.5rem;
  color: #4b6cb7;
}

.header-text h1 {
  margin: 0;
  font-size: 2rem;
}

.header-text p {
  margin: 0.2rem 0 0;
  color: #666;
}

.header-right .qr-wrapper {
  text-align: center;
}

.qr-wrapper h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #333;
}

.qr-image {
  width: 100px;
  height: 100px;
  border: 1px solid #756e6e;
  border-radius: 8px;
}

.qr-wrapper p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}

.header-text h1 {
  margin: 0;
  font-size: 2rem;
}

.header-text p {
  margin: 0.2rem 0 0;
  color: #666;
}

.content-area {
  display: flex;
  gap: 1rem;
}

.left-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qr-card h3 {
  margin-bottom: 1rem;
  color: #102a43;
}

.qr-card p {
  margin-top: 0.75rem;
  color: #666;
}

.row {
  display: flex;
  gap: 1.5rem;
}

.card {
  background: linear-gradient(35deg, #e4e8f6, #b4bacf);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 380px;
}
.card3 {
  background: linear-gradient(35deg, #e4e8f6, #b4bacf);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100px;
}

.card-icon {
  font-size: 1.5rem;
  color: #ff7e5f;
  margin-bottom: 0.5rem;
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

.card3 h2 {
  margin: 0 0 0.1rem;
  font-size: 1.5rem;
}

.scrollable {
  flex: 1;
  overflow-y: auto;
}

.scrollable::-webkit-scrollbar {
  width: 6px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #bcccdc;
  border-radius: 3px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.date {
  width: 60px;
  color: #ff7e5f;
  font-size: 0.9rem;
}

.text {
  flex: 1;
  font-size: 1rem;
  color: #333;
}

.new {
  background: #ff7e5f;
  color: #fff;
  padding: 0 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.thanks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.thanks-item {
  text-align: center;
}

.avatar-large {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.2rem;
}

.name {
  font-size: 1rem;
  color: #333;
}

.links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.links li {
  margin-bottom: 0.75rem;
}

.links li a {
  display: flex;
  align-items: center;
  color: #102a43;
  text-decoration: none;
}

.links li a i {
  margin-right: 0.5rem;
}

.sponsor-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.sponsor-item {
  text-align: center;
}

.sponsor-item .avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.5rem;
}

.sponsor-item .amount {
  font-size: 1rem;
  color: #ff7e5f;
  font-weight: bold;
  margin-top: 0.25rem;
}

.footer {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #999;
}

@media (max-width: 768px) {
  .content-area {
    flex-direction: column;
  }

  .row {
    flex-direction: column;
  }

  .thanks-grid,
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>